<template>
  <div v-loading="iframeLoading" class="iframe-container" :style="{'height': pageHeight}">
    <iframe ref="currentIframeRef" :src="target" class="iframe" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import NProgress from 'nprogress' // progress bar
  import 'nprogress/nprogress.css' // progress bar style
  import queryString from 'query-string';

  export default {
    name: 'xjtIframe',

    components: {
      ...mapGetters(['screen'])
    },

    props: {
      href: {
        type: String,
        default: '',
      },

      height: {
        type: String,
        default: '600px',
      },

      formOperates: {
        type: Array,
        default: () => [],
      },
    },

    data() {
      return {
        iframeLoading: true,
        target: '',
        pageHeight: '',
      }
    },

    computed: {
      ...mapGetters(['token', 'userInfo', 'ycToken'])
    },
    
    watch: {
      formOperates: {
        handler(val) {
          this.postMessage();
        },
        deep: true
      }
    },

    created() {
      NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示
      this.pageHeight = this.height;
      window.addEventListener('message', event => {
        const pageHeight = event.data.scrollHeight;
        // console.log('你传啥进来了？？scrollHeight --- ' + pageHeight)
        if (pageHeight && !this.height.includes('!important')) { // 当组件强行设置important时不修改
          this.pageHeight = pageHeight + 'px';
        }
      }, false);
    },

    async mounted() {
      this.createTarget();
      await this.$nextTick();
      this.resize();
    },

    methods: {
      // 显示等待框
      show() {
        NProgress.start();
        this.iframeLoading = true;
      },
      // 隐藏等待框
      hide() {
        NProgress.done()
        this.iframeLoading = false;
      },

      createTarget() {
        this.show();
        // const token = this.token.replace('bearer ', '');
        // const token = '54818794-f48a-40a5-a181-5e989202c8dc';
        const token = this.ycToken;
        const stringQuery = queryString.stringify({
          token: token,
          access_token: token,
        });
        const nextTarget = this.href.includes('?') ? `${this.href}&${stringQuery}` : `${this.href}?${stringQuery}`;
        this.target = nextTarget;
      },

      postMessage() {
        const iframe = this.$refs.currentIframeRef;
        iframe?.contentWindow.postMessage({ type: 'updateFormOperates', formOperates: this.formOperates }, '*');
      },

      resize() {
        this.iframeInit();
        window.onresize = () => {
          this.iframeInit();
        };
      },

      // iframe窗口初始化
      iframeInit() {
        const iframe = this.$refs.currentIframeRef;
        // const reviseNum = 220;
        // const clientHeight = document.documentElement.clientHeight - reviseNum;
        // iframe.style.height = `${clientHeight}px`;
        iframe.onload = () => {
          this.hide();
          this.postMessage();
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .iframe-container,
  .iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
    ::v-deep .el-loading-mask {
      top: 16px;
      right: 16px;
      bottom: 16px;
      left: 16px;
    }
  }
</style>
